<template>
	<view>
		<view style="z-index: -1; position:absolute;background-color: #fdcd1c;height: 200rpx;width: 100%;top:0;border-radius:0 0 50% 50%;"></view>
		<!-- 商店详情 -->
		<view style=" background-color: white;margin: 10rpx 30rpx;border-radius: 10rpx;box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);">
			<view style=" display: flex;">				
				<image :src="shopImage" style="height: 130rpx; width: 130rpx;margin:30rpx 30rpx 10rpx 30rpx;"></image>
				<view>
					<view style="font-size: 43rpx;margin-top: 15rpx;font-weight: 500;">{{shopName}}</view>
					<view style="color:#cccccc ;font-size: 30rpx;margin-top: 20rpx;">{{shopInfo}}</view>
				</view>
				
			</view>
			
			<view style="color:#cccccc ;font-size: 30rpx;margin-left: 10rpx;">
				<view>电话:{{shopPhone}}</view>
				<view>位置:{{shopAddress}}</view>
			</view>
		</view>
		<!-- 商品界面 -->
		<view class="product" v-for='(item,index) in dishList' :key='index'
			style="margin: 0rpx 5rpx; padding: 5rpx 30rpx; border-radius: 10px;text-align: center;">
			
			<view
				style="background-color: white;margin: 10rpx 10rpx;border-radius: 10rpx;flex:1;padding: 20rpx 20rpx 20rpx 30rpx;">
				<image :src="item.image" style="height: 190rpx; width: 190rpx;float: left;margin-right: 30rpx;"></image>
				<view style="text-align: left;">
					<view style="margin-bottom: 10rpx;font-size: 39rpx;font-weight: bold;">{{item.name}}</view>
					<view style="margin-bottom: 10rpx;font-size: 19rpx;color: #aaa">月售15</view>
					<view style="margin-bottom: 30rpx;font-size: 19rpx;color: #aaa">{{item.description}}</view>
					<!-- 无口味加号 -->
					<view v-if="item.flavors==null||item.flavors.length==0">
						<view style="float:right" @click="addToCart(item)"><uni-icons type="plus-filled" size="25"
								color="#dfce0e"></uni-icons></view>
						<text v-show="dishNumber[item.id]>0" style="float:right;margin-right: 5rpx;font-size: 41rpx;">{{dishNumber[item.id]}}</text>
						<view v-show="dishNumber[item.id]>0" style="float:right;margin-right: 5rpx;" @click="reduceCart(item)"><uni-icons type="minus-filled" size="25"
								color="#dfce0e"></uni-icons></view>
					</view>
					<!-- 有口味 -->
					<text v-else @click="showFlavors(item)" style="background-color: #fdcd1c;float:right;font-size: 30rpx;border-radius: 10rpx;padding: 6rpx 6rpx;">
						选规格
					</text>
					<view><text style="font-size: 39rpx;color: red;font-weight:550;">￥{{item.price}}</text></view>

				</view>
			</view>
		</view>
		<!-- 购物车界面 -->
		<view class="fixed-bottom" @click="openCartDetail()">
			<image src="../../static/icon/技街图标.png"
				style="margin-left:20rpx ; height: 100rpx;width: 100rpx; float: left ;"></image>
			<!-- 数量小红点 -->
			<view v-if="cartSize>0"
				style="border-radius: 50%;background-color: red;float: left;align-items: center;font-size: 30rpx;padding: 0 10rpx;">
				{{cartSize}}</view>
			<!-- 总价格 -->
			<text style="float: left;margin-left: 40rpx;font-size: 43rpx;font-weight: bold;">￥{{totalPrize}}</text>
			<!-- 结算按钮 -->
			<view v-if="cartSize>0" @click="submitCart()"
				style="float: right; background-color: #f3d110;border-radius: 40rpx; margin: 10rpx 15rpx 20rpx 0;padding:18rpx 20rpx;align-items: center;font-size: 37rpx;">
				去结算</view>
		</view>
		<!-- 购物车内容弹窗 -->
		<view v-show="showCartDetail" @click="hideCartDetail()" class="mask"></view>
		<view v-show="showCartDetail"  class="popup" style="top: 40%;">
			<view style="text-align: right;background-color:#f5f5f5; margin-top: 5rpx;color:#ababab;font-size: 31rpx;">
					<uni-icons  @click="clearCart()" type="trash" size="13"color="#ababab" style="margin-top: 5rpx;"></uni-icons> 
					<text  @click="clearCart()" style="margin-right: 5rpx;">清空购物车</text>
			</view>		
			<scroll-view :scroll-top="scrollTop" scroll-y="true" style="background-color: #f5f5f5;width: 750rpx;height: 800rpx;">	
				
				<view class="product" v-for='(item,index) in cartList' :key='index'
					style="margin: 0rpx 5rpx; padding: 5rpx 6rpx;border-bottom: #cecece solid 2rpx; text-align: center;">
					<view
						style="margin: 10rpx 10rpx;border-radius: 10rpx;padding: 20rpx 20rpx 5rpx 30rpx;">
						<image :src="item.image" style="height: 100rpx; width: 100rpx;float: left;margin-right: 30rpx;"></image>
						<view style="text-align: left;align-items: center;">
							<view style="margin-bottom: 10rpx;font-size: 30rpx;font-weight: bold;">{{item.name}}</view>
							<view style="float:right;" @click="addToCart(item)"><uni-icons type="plus-filled" size="21"
									color="#dfce0e"></uni-icons></view>
							<text style="float:right;margin-right: 5rpx;font-size: 41rpx;">{{item.number}}</text>
							<view style="float:right;margin-right: 5rpx;" @click="reduceCart(item)"><uni-icons type="minus-filled" size="21"
									color="#dfce0e"></uni-icons></view>
							<view><text style="font-size: 39rpx;color: red;font-weight:550;">￥{{item.amount*item.number}}</text></view>
							<view style="font-size: 23rpx;color: #aaa;">{{item.dishFlavor}}</view>
				
						</view>
					</view>
				</view>
				<view style="padding-bottom: 300rpx;"></view>
			</scroll-view>
			<view @click="hideCartDetail()" class="fixed-bottom">
				<image src="../../static/icon/技街图标.png"
					style="margin-left:20rpx ; height: 100rpx;width: 100rpx; float: left ;"></image>
				<!-- 数量小红点 -->
				<view v-if="cartSize>0"
					style="border-radius: 50%;background-color: red;float: left;align-items: center;font-size: 30rpx;padding: 0 10rpx;">
					{{cartSize}}</view>
				<!-- 总价格 -->
				<text style="float: left;margin-left: 40rpx;font-size: 43rpx;font-weight: bold;">￥{{totalPrize}}</text>
				<!-- 结算按钮 -->
				<view v-if="cartSize>0" @click="submitCart()"
					style="float: right; background-color: #f3d110;border-radius: 40rpx; margin: 10rpx 15rpx 20rpx 0;padding:18rpx 20rpx;align-items: center;font-size: 37rpx;">
					去结算</view>
			</view>
			
		</view>
		<!-- 菜品口味界面 -->
		<view v-show="flavorsShow" class="mask"></view>
		<view v-show="flavorsShow" class="popup" style="width: 85%;height: 650rpx;background-color: white;top: 0;left: 0;right: 0;bottom: 20%;margin: auto;border-radius: 20rpx;">
			<view style="font-size: 42rpx;font-weight: 600;margin:30rpx 30rpx ">{{currentDish.name}}</view>
			<scroll-view scroll-y="true" style="height: 400rpx;">
				<view  v-for='(item,index) in currentDish.flavors' :key='index' style="margin: 0rpx 20rpx;">
					<view style="margin-left: 30rpx;margin-top: 35rpx; color: #aaa;font-size: 30rpx;"> {{item.name}}</view>
					<uni-row>
						<uni-col :span="8" v-for="(flavor,index1) in item.value" :key='index1' style="display: flex;">
							<!-- 已被选中 -->
							<view v-if="currentFlavorSelect[index]==index1" @click="cancelSelect(index)" style="margin: 15rpx 15rpx;background-color: white;border:3rpx #fdc007 solid;border-radius: 15rpx;color: #fdcd1c;text-align: center;font-size: 35rpx;">
								{{flavor}}
							</view>
							<!-- 未被选中 -->
							<view v-else @click="changeSelect(index,index1)" style="margin: 15rpx 15rpx;background-color: white;border:3rpx #c7c7c7 solid;border-radius: 15rpx;color: #181818;text-align: center;font-size: 35rpx; ">
								{{flavor}}
							</view>
						</uni-col>
					</uni-row>
				</view>
			</scroll-view>
			<!-- 总价和添加购物车按钮 -->
			<view style="float: left;margin: 15rpx 15rpx;">
				<text style="font-size: 31rpx;font-weight: 600;">总计</text>
				<text style="font-size: 51rpx;color: red;">￥{{currentDish.price}}</text>
			</view>
			<view @click="flavorToCart()" style="margin-top: 15rpx;float: right;background-color: #fdcb01;color: #1e1e1e;padding: 15rpx 25rpx;margin: 10rpx 10rpx;border-radius: 10rpx;font-size: 32rpx;font-weight: 600;">
				+ 加入购物车
			</view>
			<view style="position: absolute; top: 100%;left: 43%;margin-top: 30rpx;">
				<uni-icons @click="hideFlavors()" type="close" size="40" color="#fdcd1c"></uni-icons>
			</view>
		</view>
		
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
import {
		baseUrl
	} from '../../config/config'
	export default {
		data() {
			return {
				shopId: -1,
				shopName: '',
				shopImage: '',
				shopAddress: '',
				shopPhone: '',
				shopInfo: '',
				dishList: [

				],
				cartList: [

				],
				dishNumber: [
					
				],
				showCartDetail: false,
				flavorsShow: false,
				currentDish:{} ,
				cartSize: 0,
				totalPrize: 0,
				currentFlavorSelect: [],
			}
		},
		onShow() {
			this.shopId = uni.getStorageSync('shopId')
			this.loadShop()
			this.loadDish()
			this.loadCart()
		},
		methods: {
			loadShop(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/shop/detail?shopId=' + this.shopId,
					method: 'GET',
					header: {
						'authentication': token,
					},
					success: (res) => {
						console.log(res.data.data)
						this.shopName=res.data.data.name
						this.shopImage=res.data.data.image
						this.shopAddress=res.data.data.address
						this.shopPhone=res.data.data.phone
						this.shopInfo=res.data.data.info
						//this.interceptorGet(res)
					},
					fail: (res) => {
						
					}
				})
			},
			loadDish() {
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/dish/' + this.shopId,
					method: 'GET',
					header: {
						'authentication': token,
					},
					success: (res) => {
						if (res.data.code === 0) return;
						//console.log(res.data.data)
						this.dishList = res.data.data
					}
				})
			},
			loadCart(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/cart/list?shopId='+ this.shopId,
					method: 'GET',
					header: {
						'authentication': token,
					},
					success: (res) => {
						if (res.data.code === 0) return;
						this.cartList = res.data.data
						let count=0
						let prize=0
						if(this.cartList!=null){
							for(let i=0;i<this.cartList.length;i++){
								this.dishNumber[this.cartList[i].dishId]=this.cartList[i].number
								count+=this.cartList[i].number
								prize+=this.cartList[i].number*this.cartList[i].amount
							}
						}
						this.cartSize=count
						this.totalPrize=prize
						//console.log(this.cartList)
					}
				})
				
			},
			
			addToCart(item) {
				let token = uni.getStorageSync('token')
				//因为购物车中的item中的id不是菜品id,要将其id变成菜品id
				//而菜品列表里item的id就是菜品id
				if(item?.dishId!=null){
					item.id=item.dishId
				}
				if(item.flavors==void 0||item.flavors.length==0){
					item.flavors=""
				}
				if(item.dishFlavor!=void 0){
					item.flavors=item.dishFlavor
				}
				uni.request({
					url: baseUrl + '/cart/add',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'authentication': token,
					},
					data:{
						'shopId': item.shopId,
						'dishId': item.id,
						'dishFlavor': item.flavors
					},
					success: (res) => {
						if(this.dishNumber[item.id]==null){
							this.dishNumber[item.id]=1
						}
						else this.dishNumber[item.id]++
						this.loadCart()
					}
					
				})
				
			},
			reduceCart(item){
				
				if(item?.dishId!=null){
					item.id=item.dishId
				}
				if(item.dishFlavor!=void 0){
					item.flavors=item.dishFlavor
				}
				if(item.flavors==void 0||item.flavors.length==0){
					item.flavors=""
				}
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/cart/sub',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'authentication': token,
					},
					data:{
						'shopId': item.shopId,
						'dishId': item.id,
						'dishFlavor': item.flavors
					},
					success: (res) => {
						this.dishNumber[item.id]--
						this.loadCart()
					}
				})
				
			},
			clearCart(){
				console.log("清空购物车")
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/cart/clear?shopId='+this.shopId,
					method: 'DELETE',
					header: {
						'authentication': token,
					},
					
					success: (res) => {
						this.dishNumber=[]
						this.loadCart()
						this.hideCartDetail()
					}
				})
			},
			submitCart() {
				//console.log('提交购物车')
				uni.navigateTo({
					url: '/pages/submit/submit'
				})
			},
			openCartDetail() {
				if(this.cartSize>0){
					console.log('购物车内容')
					this.showCartDetail=true
				}
				
			},
			hideCartDetail(){
				this.showCartDetail=false
			},
			showFlavors(item){
				this.currentDish=JSON.parse(JSON.stringify(item));
				this.currentFlavorSelect=[]
				for(let i=0;i<this.currentDish.flavors.length;i++){
					this.currentDish.flavors[i].value=JSON.parse(this.currentDish.flavors[i].value)
					this.currentFlavorSelect[i]=0
				}
				this.flavorsShow=true
				//console.log(this.currentDish)
			},
			hideFlavors(){
				this.flavorsShow=false
			},
			changeSelect(index,index1){
				this.currentFlavorSelect[index]=index1
				//console.log(this.currentFlavorSelect)
				//强制刷新页面，可以防止v-for使用前一次的虚拟dom导致切换索引不显示
				this.$forceUpdate()
			},
			cancelSelect(index){
				this.currentFlavorSelect[index]=-1
				this.$forceUpdate()
			},
			flavorToCart(){
				// console.log(this.currentDish)
				// console.log(this.currentFlavorSelect)
				let dishId=this.currentDish.id
				let flavors='['
				for(let i=0;i<this.currentFlavorSelect.length;i++){
					let k= this.currentFlavorSelect[i]
					if(k==-1)continue
					if(flavors[flavors.length-1]!='[')flavors+=','
					flavors+= '"'+this.currentDish.flavors[i].value[k]+'"'
				}
				
				flavors+=']'
				let dish={id:dishId,flavors:flavors,shopId:this.shopId}
				console.log(dish)
				this.addToCart(dish)
			},
			
		}
	}
</script>

<style>
	.fixed-bottom {
		position: fixed;
		bottom: 20rpx;
		text-align: center;
		width: 97%;
		background-color: #fff;
		margin: 10rpx 10rpx;
		padding: 10rpx 0;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}
	/* 遮罩层样式 */
	.mask {
	  position: fixed;
	  /* 使遮罩层铺满整个页面 */
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  /* 通过z-index属性，使遮罩层在弹出层之下 */
	  z-index: 1;
	}
	
	/* 弹出层样式 */
	.popup {
	  position: fixed;
	  z-index: 2;
	}
</style>